<template>
	<view class="box bg-f7 padding-b-30">
		<view class="index-bg">
			<image :src="BASE_URL + '/uploads/20250801/674bab6663cf4e904e7de78ac58f8358.png'" mode="widthFix"></image>
		</view>
		<view class="z-1">
			<u-navbar :titleStyle='{"color":"#000"}' leftIconColor='#000' title=" 健康存折" bgColor="transparent"
				@rightClick="rightClick" :autoBack="true" :fixed="false"> </u-navbar>
			<view class="point-box justifyContent-spaceBetween align-items-center">
				<view class="flex-column">
					<view class="fs-28 color-0">
						<text class='fw-b margin-r-10'> {{userInfo.score||0}}</text>积分
					</view>
					<view class="fs-28 color-333 align-items-center">
						积分规则
						<image src='/static/image/healthPassbook/router.png' mode="aspectFill"></image>
					</view>
				</view>
				<view class="fs-28 color-white btn-box bg-e5" @click="goPoints">
					积分明细
				</view>
			</view>
			<view class="border-radio-14 padding-l-r-30 bg-f7">
				<view class="clock-box">
					<view class="clock-title">
						<text class="fw-b color-0 fs-32">每日任务</text>
						<text class="color-70 fs-28 margin-l-20">完成任务每日最高可获得90积分</text>
					</view>
					<view class="clock-content  border-radio-14 align-items-center justifyContent-spaceBetween">
						<view class="border-radio-14 bg-white align-items-center padding-l-r-20 clock-list"
							@click="goPage(1)">
							<view class="flex-column">
								<text class="color-333 fs-28 fw-b">健康答题</text>
								<text class="color-43 fs-22">前往答题</text>
							</view>
							<view>
								<image src="/static/image/healthPassbook/icon-1.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="border-radio-14 bg-white align-items-center padding-l-r-20 clock-list"
							@click="goPage(2)">
							<view class=" flex-column">
								<text class="color-333 fs-28 fw-b">预约服务</text>
								<text class="color-43 fs-22">前往预约 </text>
							</view>
							<view>
								<image src="/static/image/healthPassbook/icon-2.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="border-radio-14 bg-white align-items-center padding-l-r-20 clock-list"
							@click="goPage(3)">
							<view class=" flex-column">
								<text class="color-333 fs-28 fw-b">健康科普学习</text>
								<text class="color-43 fs-22">前往学习</text>
							</view>
							<view>
								<image src="/static/image/healthPassbook/icon-3.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="border-radio-14 bg-white align-items-center padding-l-r-20 clock-list"
							@click="goPage(4)">
							<view class=" flex-column">
								<text class="color-333 fs-28 fw-b">健康供销社</text>
								<text class="color-43 fs-22">前往购买</text>
							</view>
							<view>
								<image src="/static/image/healthPassbook/icon-4.png" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="title-box padding-t-b-20 fs-32 color-0 fw-b">积分兑换</view>
					<view class="flex-wrap justifyContent-spaceBetween">
						<view v-for="item in list" :key="item.id"
							class="point-list bg-white border-radio-14 margin-b-20">
							<view class="img-box">
								<image :src=" BASE_URL + item.image" mode="aspectFill"></image>
							</view>
							<view class="fs-28 color-333 fw-b margin-b-10 margin-b-10 only-1">{{item.price}}元优惠卷</view>
							<view class="align-items-center fs-26 color-red">
								<text class="fs-36 fw-b"> {{item.score}} </text>积分
								<view class="flex-1 fw-b"></view>
								<view class="color-white btn fs-26" @click="exchange(item)">去兑换</view>
							</view>
						</view>
					</view>
				</view>
			</view>


		</view>

	</view>
</template>

<script>
	import {
		couponList,
		exchangeCoupon
	} from '@/api/healthPassbook.js'
	import $baseUrl from "@/config/index.js"
	import {
		getUserInfo
	} from "@/api/user";
	const BASE_URL = $baseUrl.baseUrl
	export default {

		data() {
			return {
				userInfo: {},
				BASE_URL,
				point: 1258,
				list: [],
			}
		},
		onLoad() {
			this.getUserInfo()
			this.getCouponList()
		},
		onShow() {},
		methods: {
			goPage(index) {
				let url = ''
				if(index ==1 ){
					url='/pageA/healthPassbook/healthPassbook'
				}
				if (index == 2) {
					url = '/pageA/homeCare/homeCare'
				}
				if(index==3){
					return uni.switchTab({
						url:'/pages/video/video'
					})
				}
				if (index == 4) {
					url = "/pageA/shop/shop"
				}
				uni.navigateTo({
					url
				})
			},
			goPoints() {
				uni.navigateTo({
					url: '/pageA/points/points'
				})
			},
			// 优惠券
			getCouponList() {
				couponList().then(res => {
					console.log(res);
					this.list = res.data
				})
			},
			// 个人信息

			getUserInfo() {
				let token = uni.getStorageSync('token')
				if (token) {
					getUserInfo({
						token
					}).then(res => {
						if (res.code == 1) {
							this.userInfo = res.data
						} else {

						}
					})
				}
			},
			// 兑换
			exchange(item) {
				let that = this
				uni.showModal({
					confirmText: '兑换',
					showCancel: true,
					title: '提示',
					content: `您确定花费${item.score}积分兑换${item.price}元优惠卷`,
					success(e) {
						if (e.confirm) {
							exchangeCoupon({
								coupon_id: item.id
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										icon: 'none',
										title: '兑换成功'
									})
									that.getUserInfo()
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg
									})
								}
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.point-box {
		height: 220rpx;
		padding: 0 20rpx 0 40rpx;

		.fw-b {
			font-size: 56rpx
		}

		image {
			width: 26rpx;
			height: 26rpx;
			margin-left: 10rpx;
		}

		.btn-box {
			width: 160rpx;
			height: 66rpx;
			border-radius: 33rpx;
			text-align: center;
			line-height: 66rpx
		}
	}

	.clock-box {
		.days-box {
			align-items: baseline;
			height: 92rpx;
			padding-top: 18rpx;

			.margin-l-20 {
				font-weight: 500;
			}
		}

		.clock-title {
			line-height: 90rpx;
		}



		.clock-btn-box {
			position: absolute;
			bottom: 20rpx;
			left: 10rpx;
			width: 630rpx;
			height: 93rpx;
			padding-top: 23rpx;
			padding-left: 30rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.64) 0%, #FFFFFF 100%);
			box-shadow: 0 -4rpx 10rpx 1px #FFFFFF;
			border-radius: 0 0 12rpx 12rpx;

			.btn-box {
				width: 600rpx;
				height: 70rpx;
				background: #E5A156;
				line-height: 70rpx;
				text-align: center;
				border-radius: 35rpx;
			}
		}
	}

	.clock-content {

		flex-wrap: wrap;

		.clock-list {
			justify-content: space-between;
			width: 335rpx;
			height: 120rpx;
			padding-top: 12rpx;
			margin-bottom: 18rpx;
		}

		.fs-22 {
			width: 110rpx;
			height: 40rpx;
			background: rgba(67, 171, 196, 0.03);
			border-radius: 20rpx;
			border: 1px solid #43ABC4;
			margin-top: 12rpx;
			text-align: center;
			line-height: 40rpx;
		}

		image {
			width: 70rpx;
			height: 70rpx;
		}
	}

	.title-box {}

	.point-list {
		width: 335rpx;
		padding: 10rpx;

		.img-box {

			.image {
				width: 314rpx;
				height: 314rpx;
			}
		}

		.btn {
			width: 114rpx;
			height: 46rpx;
			background: #43ABC4;
			border-radius: 28rpx;
			text-align: center;
			line-height: 46rpx;
		}
	}
</style>